import React from 'react'
import { Text, View } from '@tarojs/components'
import StepCard from '@COMPONENTS/DataCenter/StepCard'
import TodayMeditationCard from '@COMPONENTS/DataCenter/TodayMeditationCard'
import { LanguageType } from '@INTERFACES/Common'
import PainSituationsCard from '@COMPONENTS/DataCenter/PainSituationsCard'
import { useSelector } from 'react-redux'
import { RootStateITF } from '@REDUXITF/index'
import { DataCenterStateITF } from '@REDUXITF/dataCenter'
import style from './TodayData.module.scss'

interface Props {
  language: LanguageType;
  showLogin: () => void;
}

const TodayData: React.FC<Props> = ({ language, showLogin }) => {
  const { todayPainLog } = useSelector<RootStateITF, DataCenterStateITF>(state => state.dataCenter)
  return (
    <View className={style.todayDataContainer}>
      <Text className={style.toDayTitle}>今日记录</Text>
      <View className={style.topCard}>
        <StepCard showLogin={showLogin} />
        <TodayMeditationCard language={language} />
      </View>
      <PainSituationsCard todayPainLog={todayPainLog} />
    </View>
  )
}

export default TodayData
